import React from 'react'
import {
    Switch,
    Route,
    Link,
    HashRouter
} from 'react-router-dom'

import {Layout, Menu, Breadcrumb, Icon} from 'antd';

const {SubMenu} = Menu;

const {Header, Footer, Sider, Content} = Layout;

import Home from './home/HomeContainer.jsx'
import About from './about/AboutContainer.jsx'
import Movie from './movie/MovieContainer.jsx'

import styles from '../assets/css/App.scss'

export default class App extends React.Component {
    constructor(props) {
        super(props)
        //初始化state
        this.state = {
            menuItemList: [
                {name: "首页"},
                {name: "电影"},
                {name: "关于"},
            ]
        };
    }


    //默认属性
    static defaultProps = {}


    componentDidMount() {

    }



    render() {
        //菜单
        return <HashRouter>
            <Layout className="layout" style={{height: "100%"}}>
                <Header>
                    <div className={styles.logo}/>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={window.location.hash.split("/")[1]}
                        style={{lineHeight: '64px'}}
                    >
                        <Menu.Item key="home">
                            <Link to="/home">首页</Link>
                        </Menu.Item>
                        <Menu.Item key="movie">
                            <Link to="/movie/in_theaters/1">电影</Link>
                        </Menu.Item>
                        <Menu.Item key="about">
                            <Link to="/about">关于</Link>
                        </Menu.Item>
                    </Menu>
                </Header>
                <Content style={{background: '#fff', minHeight: 280, height: "100%"}}>
                    <Route path="/home" component={Home}/>
                    <Route path="/movie" component={Movie}/>
                    <Route path="/about" component={About}/>
                </Content>
                <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>,
        </HashRouter>
    }
}

class MenuItemEleList extends React.Component {
    render() {
        const arr = []
        this.props.menuItemList.map((item, index) => {
            arr.push(<Menu.Item key={index}>{item.name}</Menu.Item>)
        })
        return arr;
    }
}


